<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>权限申请列表</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="qczlm/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="qczlm/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="qczlm/easyui/demo/demo.css">
	<script type="text/javascript" src="qczlm/easyui/js/jquery.min.js"></script>
	<script type="text/javascript" src="qczlm/easyui/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="qczlm/easyui/locale/easyui-lang-zh_CN.js"></script>
	<style type="text/css">
		.tabclass{
			border-collapse:collapse;
			border:1px solid black;
		}
		.tabclass td{
			border:1px solid black;
		}
	</style>
</head>
<body>
	<h2>权限列表</h2>
	<div style="margin:20px 0;"></div>
	
	<table id="dg" title="权限列表" style="width:700px;height:375px" data-options="
				rownumbers:true,
				singleSelect:true,
				autoRowHeight:false,
				pagination:true,
				pageSize:10">
		<thead>
			<tr>
				<th field="id" width="132">权限ID(父)</th>
				<th field="name" width="120">权限名称</th>
				<th field="key" width="200" align="right">内容</th>
				<th field="select" width="200" align="right">查看子权限</th>
			</tr>
		</thead>
	</table>
	<!-- 隐藏窗口 -->
	<div id="win" style="display: none;" align="center">
		<div id="tdiv">
			<table id="tab" class="tabclass" width="100%">
				<tr>
					<td>子权限ID</td>
					<td>子权限</td>
					<td>内容</td>
					<td>是否申请此权限<span onclick="chk(0);" style="color:red;cursor:pointer;">(申请所有权限点击此处)</span></td>
				</tr>
			</table><hr />
			<input type="hidden" id="chks_value">
			<input type="button" id="sub" value="申请权限">
			<input type="button" id="ret" onclick="chk(1);" value="取消权限">
		</div>
		<div id="ts"></div>
	</div>
	
	<!-- js代码 -->
	<script>
		//多选按钮方法
		function chk(type){
			var check=document.getElementsByName("chk_name");
	 		for(var i=0;i<check.length;i++){
				//全选	 			
	 			if(type==0){
	 				if(check[i].checked==false){
						check[i].checked=true;
					}
	 			}else{//取消选择
	 				if(check[i].checked==true){
						check[i].checked=false;
					}
	 			}
	 		}
	 		chkValue();
		}
		//子权限权限表格
		function child(id){
			//显示窗口
			$('#win').show();
			//给窗口设置属性
			$('#win').window({
				title:'子权限',
				width:700,   
		     	height:500,   
		     	modal:true,
		     	shadow:true
		    });
		    //获取子权限列表添加到窗口表格中
		    $.ajax({
		    	url:'channel/child/'+id+'',
		    	type:'get',
		    	data:{id:'${list.id}'},
		    	dataType:'json',
		    	success:function(JR){
		    		//清空表格内容
		    		$("#tab").find("tr").next().html("");
		    		var json = JR.obj;
		    		var str="";
		    		if(typeof(json)=="undefined"){
		    			//隐藏表格的div
		    			$("#tdiv").hide();
		    			//显示提示消息
		    			$("#ts").show();
		    			$("#ts").html("暂时没有可用权限！");
		    		}else{
		    			//隐藏提示消息
			    		$("#ts").hide();
			    		//展示表格内容
			    		$("#tdiv").show();
			    		for(var i=0;i<json.length;i++){
			    			str+="<tr><td>"+json[i].id+"</td><td>"+json[i].name+""
			    				 +"</td><td>"+json[i].key+"</td><td>"
			    				 +"<input name='chk_name' onclick='chkValue();' type='checkbox' value='"+json[i].key+"'></td>"
			    				 +"</tr>";
			    		}
			    		//添加到table中
			    		$("#tab").append(str);
		    		}
		    	}
		    });
		}
		//获取选中权限的ID
		function chkValue(){
			var chk = document.getElementsByName("chk_name");
			var chkvalue="";
			for(var i=0;i<chk.length;i++){
				if(chk[i].checked){
					chkvalue+=chk[i].value+",";
				}
			}
			chkvalue=chkvalue.substring(0,chkvalue.length-1);
			document.getElementById("chks_value").value=chkvalue;
		}
		//获取表单信息
		function getData(obj){
			var rows = [];
			for(var i=0; i<obj.length;i++){
				rows.push({
					'id': obj[i].id,
					'name': obj[i].name,
					'key': obj[i].key,
					'select': '<a href="javascript:void(0);" onclick="child('+obj[i].id+')">查看权限</a>'
				});
			}
			return rows;
		}
		function pagerFilter(data){
			if (typeof data.length == 'number' && typeof data.splice == 'function'){	// is array
				data = {
					total: data.length,
					rows: data
				}
			}
			var dg = $(this);
			var opts = dg.datagrid('options');
			var pager = dg.datagrid('getPager');
			pager.pagination({
				onSelectPage:function(pageNum, pageSize){
					opts.pageNumber = pageNum;
					opts.pageSize = pageSize;
					pager.pagination('refresh',{
						pageNumber:pageNum,
						pageSize:pageSize
					});
					dg.datagrid('loadData',data);
				}
			});
			if (!data.originalRows){
				data.originalRows = (data.rows);
			}
			var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
			var end = start + parseInt(opts.pageSize);
			data.rows = (data.originalRows.slice(start, end));
			return data;
		}
		$(function(){
			//获取父节点权限
			$.ajax({
  				url:'channel/parent',
  				type:'get',
  				data:{size:15},
  				dataType:'json',
  				success:function(JR){
					$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData(JR.obj));
  				}
  			});
  			
  			$("#sub").click(function(){
  				//获取选中权限ID
  				var values=$("#chks_value").val();
  				if(values==''){
	  				alert("请选择需要申请的权限！");
	  				return;
  				}
  				$.ajax({
  					url:'branchchannel/register',
  					type:'post',
  					data:{appname:'${name}',keys:values},
  					dataType:'json',
  					success:function(JR){
  						if(JR.success==true){
  							alert("申请成功");
  						}else{
  							alert("申请失败");
  						}
  					}
  				});
  			});
		});
	</script>
</body>
</html>
